*{
    margin: 0px;
    padding: 0px;
}
ul,ol{
    list-style: none;
}

a{
    text-decoration: none;
}
header{
    
    width: 375px;
    position: sticky;
    z-index: 2;
    top: 0px;
    left: 0px;
    background-color: white;
    ul{
        height: .88rem;
        display: flex;
        justify-content: center;
        align-items: center;
        li{
            margin-left: .15rem;
            margin-right: .15rem;
            font-size: .25rem;
            position: relative;
            a{
                color: black;
            }
            &::after{
                content: "";
                width: 70%;
                height: .06rem;
                background-color: #ff6700;
                position: absolute;
                left: .06rem;
                bottom: -0.06rem;
                display: none;
            }
            &:hover::after{
                display: block;
            }
            &:hover a{
                color: #ff6700;
            }
        }
    }
    div{
        display: flex;
        .icon-xiangzuojiantou{
            font-size: .38rem;
            position: absolute;
            left: 20px;
            top: 15px;
            color: black;
        }
        .icon-fenxiang{
            font-size: .38rem;
            position: absolute;
            right: 20px;
            top: 15px;
            color: black;
        }
    }
}
article{
    background-color: #f1f3f4;
    .big_img{
        position: relative;
        width: 7.2rem;
        height: 7.91rem;
        overflow: hidden;
        background-color: white;
        div{
            height:  7.91rem;
            display: flex;
            display: flex;
            position: relative;
            animation-name: move;
            animation-iteration-count: infinite;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-fill-mode: both;
            left: 0;
            top: 0;
            img{
                width: 7.2rem;
                height: 7.91rem;
            }
        }
        section{
            text-align: center;
            height: .44rem;
            width: 1.02rem;
            background-color: #7b7b7b;
            color: white;
            position: absolute;
            right: .58rem;
            bottom: .58rem;
            font-size: .27rem;
            border-radius: 15px;
        }
    }
    .aside1{
        div{
            margin-top: .38rem;
            padding-left: .29rem;
            padding-left: .29rem;
            p{
                font-size: .38rem;
                color: #ff6700;
                span{
                    color: #7777a7;
                    text-decoration: line-through;
                    font-size: .25rem;
                }
            }
        }
    }
    .aside2{
        margin-top: .19rem;
        font-size: .25rem;
        width: 6.55rem;
        padding-left: .1rem;
        padding-right: .1rem;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #ff5968;
        background-color: #fff2ef;
        div{
            p,span{
                border: 1px solid #ff5968;
                margin-top: .1rem;
            }
            a{
                color: #ff5968;
            }
        }
    }
    .aside3{
        padding-left: .29rem;
        padding-right: .29rem;
        font-size: .25rem;
        background-color: white;
        h5{
            font-size: .29rem;
            padding: .19rem 0;
        }
        li{
            margin-top: .19rem;
        }
    }
    .aside4{
        height: .38rem;
        padding: .27rem .29rem;
        line-height: .38rem;
        background-color: white;
        a{
            display: block;
            width: 3.2rem;
            font-size: .25rem;
            color: black;
            background-color: #f0f0f0;
            border-radius: 15px;
        }
    }
    .aside5{
        background-color: white;
        margin-top: .19rem;
        padding-top: .19rem;
        width: 7.2rem;
        overflow: scroll;
        ::-webkit-scrollbar{
            display: none;
        }
        border-top: 1px solid #f2f2f2;
        ul{
            display: flex;
            flex-direction: row;
            text-align: center;
            li{
                font-size: .25rem;
                img{
                    width: .29rem;
                    height: .29rem;
                }
                p{
                    width: 1.92rem;
                }
            }
        }
    }
    .aside6{
        padding: .27rem .19rem .27rem .29rem;
        line-height:.31rem;
        background-color: #fff2ef;
        img{
            width: 1.25rem;
            height: .31rem;
        }
        span{
            font-size: .25rem;
            position: relative;
            &::after{
                width: .31rem;
                height: .31rem;
                content: ">";
                font-size: .31rem;
                position: absolute;
                top: 0rem;
                right: -2.17rem;
            }
        }
    }
    .aside7{
        background-color: white;
        margin-top: .19rem;
        display: flex;
        padding-left: .31rem ;
        padding-top: .25rem;
        .aside7_div1{
            width: 20%;
            height: .61rem;
            a{
                display: block;
                font-size: .25rem;
                color: #000;
            }
        }
        .aside7_div2{
            width: 80%;
            font-size: .25rem;
            position: relative;
            padding-bottom: .25rem;
            border-bottom: 1px solid #f2f2f2;
            &::after{
                width: .31rem;
                height: .31rem;
                content: ">";
                font-size: .31rem;
                position: absolute;
                top: 0rem;
                right: .29rem;
            }
        }
    }
    .aside8{
        background-color: white;
        display: flex;
        padding-left: .31rem ;
        padding-top: .25rem;
        .aside8_div1{
            width: 20%;
            height: .61rem;
            a{
                display: block;
                font-size: .25rem;
                color: #000;
            }
        }
        .aside8_div2{
            width: 80%;
            font-size: .25rem;
            position: relative;
            padding-bottom: .25rem;
            border-bottom: 1px solid #f2f2f2;
            &::after{
                width: .31rem;
                height: .31rem;
                content: ">";
                font-size: .31rem;
                position: absolute;
                top: 0rem;
                right: .29rem;
            }
        }
    }
    .aside9{
        background-color: white;
        font-size: .25rem;
        display: flex;
        padding-left: .31rem ;
        padding-top: .25rem;
        div{
            margin-left: .19rem;
            img{
                width: .23rem;
                height: .23rem;
            }
        }
        .aside9_div3{
            position: relative;
            padding-bottom: .25rem;
            border-bottom: 1px solid #f2f2f2;
            &::after{
                width: .31rem;
                height: .31rem;
                content: ">";
                font-size: .31rem;
                position: absolute;
                top: 0rem;
                right: -1.34rem;
            }
        }
    }
    .aside10{
        font-size: .29rem;
        margin-top: .19rem;
        background-color: white;
        padding-left: .29rem;
        .aside10_div1{
            padding-top: .29rem;
            padding-bottom: .29rem;
            font-size: .35rem;
        }
        .aside10_div2{
            ul{
                display: flex;
                justify-content: space-between;
                align-items: center;
                li{
                    text-align: center;
                    font-size: .25rem;
                    .aside10_div2_img1{
                        width: 1.63rem;
                        height: 1.63rem;
                    }
                    .aside10_div2_img{
                        width: .27rem;
                        height: .27rem;
                    }
                    .aside10_div2_img2{
                        width: .48rem;
                        height: .48rem;
                    }


                }
            }
        }
        .aside10_div3{
            margin-top: .38rem;
            text-align: center;
            .span1{
                color: #ff5934;
            }
            .span2{
                color: #bfbfbf;
                text-decoration: line-through;
            }

        }
        .aside10_div4{
            margin-top: .38rem;
            width: 95%;
            margin-left: 0px;
            margin-right: auto;
            padding: .19rem 0px;
            text-align: center;
            background-color: #ff5b30;
            border-radius: 25px;
            a{
                width: 100%;
                height: 100%;
                display: block;
                color: white;
                
            }
        }
    }
    .aside11{
        padding-top: .38rem;
        padding-bottom: .29rem;
        background-color: white;
        padding-left: .29rem;
        font-size: .25rem;
        .aside11_div1{
            display: flex;
            justify-content: space-between;
            span{
                color: #7f7f7f;
            }
        }
        ul{
            margin-top: .19rem;
            margin-bottom: .19rem;
            display: flex;
            flex-wrap: wrap;
            li{
                margin-top: .1rem;
                margin-right: .1rem;
                text-align: center;
                width: 23%;
                padding: 1px;
                background-color: #ffeeea;
                border-radius: .48rem;
            }
        }
        .aside11_div2{
            display: flex;
            overflow-x: scroll;
            &::-webkit-scrollbar{
                display: none;
            }
            section{
                margin-right: .19rem;
                padding: .19rem;
                width: 5.43rem;
                border: 1px solid #e5e5e5;
                border-radius: 10px;
                .aside11_div21{
                    display: flex;
                    img{
                        width: .63rem;
                        height: .63rem;
                        border-radius: 50%;
                        margin-right: .38rem;
                    }
                    div{
                        span{
                            font-size: .23rem;
                            color: #b2b2b2;
                        }
                    }
                }
                .aside11_div22{
                    margin-top: .38rem;
                    margin-bottom: .38rem;
                    color: #7f7f7f;
                }
                .aside11_div23{
                    padding-bottom: .38rem;
                    display: flex;
                    img{
                        margin-right: .19rem;
                        width: 1.52rem;
                        height: 1.52rem;
                    }
                }
            }
        }
        
    }
    .aside12{
        background-color: white;
        margin-top: .29rem ;
        margin-bottom: .29rem;
        width: 6.90rem;
        font-size: .25rem;
        padding: 0px .15rem .38rem .15rem;
        .aside12_section1{
            position: relative;
            padding-left: .15rem;
            padding-right: .15rem;
            height: .98rem;
            line-height: .98rem;
            &::after{
                content: ">";
                font-size: .38rem;
                width: .38rem;
                height: .38rem;
                position: absolute;
                right: 0px;
                top: 0px;
            }
        }
        .aside12_section3{
            width: 6.91rem;
            overflow-y: scroll;
            .aside12_section2{
                width: 15.36rem;
                display: flex;
                .aside12_section2_div1{
                    margin-right: .38rem;
                    width: 2.71rem;
                    border: 1px solid #e5e5e5;
                    border-radius: .19rem;
                    overflow: hidden;
                    padding-bottom: .19rem;
                    >img{
                        width: 2.71rem;
                        height: 2.71rem;
                    }
                    >p{
                        width: 2.71rem;
                        margin-top: .19rem;
                    }
                    .aside12_section2_div1_down{
                        margin-left: .1rem;
                        width: 2.71rem;
                        margin-top: .19rem;
                        display: flex;
                        justify-content: space-between;
                        .aside12_section2_div1_down_aside1{
                            img{
                                width: .35rem;
                                height: .35rem;
                            } 
                            span{
                                color: #7f7f7f;
                            }  
                        }
                        .aside12_section2_div1_down_aside2{
                            margin-right: .19rem;
                            img{
                                width: .35rem;
                                height: .35rem;
                            } 
                            span{
                                color: #7f7f7f;
                            }  
                        }
                    }
                }
                
            }
        }
    }
    .aside13{
        width: 6.55rem;
        height: 1.8rem;
        margin-left: auto;
        margin-right: auto;
        border-radius: 15px;
        overflow: hidden;
        img{
            width: 6.55rem;
            height: 1.8rem;
        }
    }
    .aside14{
        font-size: .25rem;
        background-color: white;
        padding-left: .31rem;
        padding-right: .31rem;
        .aside14_div1{
            padding-top: .38rem;
            padding-bottom: .38rem;
            display: flex;
            justify-content: space-evenly;
            font-size: .31rem;
            span{
                position: relative;
                &::after{
                    content: "";
                    width: 25%;
                    height: .06rem;
                    position: absolute;
                    left: .48rem;
                    bottom: -0.13rem;
                    background-color: #ff5934;
                    display: none;
                }
                &:hover::after{
                    display: block;
                }
            }
        }
        ul{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li{
                margin-top: .19rem;
                width: 2.07rem;
                .aside14_div2{
                    width: 2.07rem;
                    height: 2.07rem;
                    border-radius: 15px;
                    overflow: hidden;
                    background-color: #f7f7f7;
                    img{
                        width: 2.07rem;
                        height: 2.07rem;
                    }
                }
                .aside14_div3{
                    p{
                        width: 2.07rem;
                        margin-bottom: .1rem;
                    }
                    span{
                        color: #ff6700;
                        span{
                            font-size: .23rem;
                            color: #9f9f9f;
                            text-decoration: line-through;
                        }
                    }

                }
            }
        }
    }
    .aside15{
        margin-top: .38rem;
        background-color: white;
        div{
            background-color: white;
            padding-top: .38rem;
            padding-bottom: .38rem;
            display: flex;
            justify-content: space-evenly;
            font-size: .31rem;
            position: sticky;
            top: .86rem;
            span{
                &:hover{
                    color: #ff6700;
                }
            }
        }
        ul{
            li{
                display: flex;
                flex-direction: column;
                img{
                    width: 375px;
                    height: auto;
                }
            }
        }

    }
    .aside16{
        div{
            margin-top: .38rem;
            padding-left: .19rem;
            padding-right: .19rem;
            font-size: .31rem;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            li{
                text-align: center;
                font-size: .31rem;
                width: 3.55rem;
                img{
                    width: 3.55rem;
                    height: 3.55rem;
                }
                span{
                    color: #ff7e00;
                }
            }
        }
    }
    .aside17{
        width: 2.65rem;
        height: .73rem;
        position: fixed;
        bottom: 1.92rem;
        left: 25%;
        img{
            height: .73rem;
            width: 2.65rem;
        }
    }
}
footer{
    padding-left: .19rem;
    padding-right: .19rem;
    height: 1rem;
    font-size: .27rem;
    display: flex;
    background-color: white;
    justify-content: space-evenly;
    align-items: center;
    position: fixed;
    bottom: 0px;
    left: 0px;
    ul{
        width: 50%;
        display: flex;
        li{
            width: 33%;
            text-align: center;
            img{
                width: .63rem;
                height: .63rem;
            }
            p{
                font-size: .21rem;
            }
        }
    }
    .input1{
        background-color: #fdbd00;
        border-bottom-left-radius: .29rem;
        border-top-left-radius: .29rem;
        color: white;
    }
    .input2{
        background-color: #ff670c;
        border-bottom-right-radius: .29rem;
        border-top-right-radius: .29rem;
        color: white;
    }

    input{
        width: 25%;
        height: 80%;
        width: 2.4rem;
        border: none;
        font-weight: bold;
        color: #333333;
    }
}
@keyframes move{
    0%{
        left: 0rem;
    }
    32%{
        left: 0rem;
    }
    33%{
        left: -7.2rem;
    }
    65%{
        left: -7.2rem;
    }
    66%{
        left: -14.4rem;
    }
    99%{
        left:-14.4rem;
    }
    100%{
        left: 21.6rem;
    }
}